<script setup>
import { ref } from 'vue'
import { motion, useMotionValue, useTransform } from 'motion-v'

const activeDirection = ref(null)

const fff = (e) => {
    console.log(e);
}

const x = useMotionValue(0)
const xInput = [-80, 0, 80]

const background = useTransform(x, xInput, [
    'rgb(255, 182, 185)',
    '#fff',
    'rgb(3, 209, 0)',
])

const color = useTransform(x, xInput, [
    'rgb(255, 182, 185)',
    '#fff',
    'rgb(3, 209, 0)',
])

const tickPath = useTransform(x, [10, 80], [0, 1])
const crossPathA = useTransform(x, [-10, -45], [0, 1])
const crossPathB = useTransform(x, [-50, -80], [0, 1])
</script>

<template>
    <div>
        <div class="fun-box">
            <motion.div :initial="false" :animate="{ opacity: 1 }" :transition="{ duration: 0.1 }"
                :style="{ rotate: 0 }" class="line" />
            <motion.div :style="{ x, borderColor: background }" drag="x" @dragEnd="fff($event)"
                :dragConstraints="{ top: 0, right: 0, bottom: 0, left: 0 }"
                :dragTransition="{ bounceStiffness: 500, bounceDamping: 15 }" :dragElastic="0.2"
                :whileDrag="{ cursor: 'grabbing' }" class="box">
                <svg class="progress-icon" viewBox="0 0 50 50">
                    <motion.path fill="none" stroke-width="4" :stroke="color" d="M14,26 L 22,33 L 35,16"
                        :style="{ pathLength: tickPath }" />
                    <motion.path as="path" fill="none" stroke-width="4" :stroke="color" d="M17,17 L33,33"
                        stroke-dasharray="1 1" :style="{ pathLength: crossPathA }" />
                    <motion.path as="path" fill="none" stroke-width="4" :stroke="color" d="M33,17 L17,33"
                        stroke-dasharray="1 1" :style="{ pathLength: crossPathB }" />
                </svg>
            </motion.div>
        </div>
    </div>
</template>

<style>
.fun-box {
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 10px;
}

.box {
    width: 54px;
    height: 54px;
    border: 2px solid #f5f5f5;
    border-radius: 6px;
    position: absolute;
    cursor: grab;
}

.line {
    width: 300px;
    height: 1px;
    border-top: 1px dashed #f5f5f5;
    position: absolute;
}
</style>
